<template>
	<view class="lease-order-detail">
		<!-- Header -->
		<view class="header">
			<!-- Header the Background -->
			<!-- <view class="header-bg"></view> -->
			<!-- Header the Content -->
			<view class="header-content">
				<!-- 待付款 -->
				<template v-if="orderStatus == 0">
					<view class="header-title">待付款</view>
					<view class="header-value">
						<text>支付剩余</text>
						<u-count-down separator="zh" font-size="26" separator-size="26" color="#ffffff"
							separator-color="#ffffff" bg-color="rgba(0, 0, 0, 0)" :show-days="false" :show-hours="false"
							:show-border="false" :timestamp="payCountDown" @end="endPayCountDown" />
						<text>自动关闭</text>
					</view>
				</template>
				<!-- 待发货 -->
				<template v-else-if="orderStatus == 1">
					<view class="header-title">待发货</view>
					<view class="header-value">等待卖家发货，请耐心等待…</view>
				</template>
				<!-- 待收货 -->
				<template v-else-if="orderStatus == 2">
					<view class="header-title">待收货</view>
					<view class="header-value">包裹已经在路上了，请耐心等待…</view>
				</template>
				<!-- 租用中 -->
				<template v-else-if="orderStatus == 3">
					<view class="header-title">租用中</view>
					<view class="header-value">商品正在租用中</view>
				</template>
				<!-- 已完成 -->
				<template v-else-if="orderStatus == 4">
					<view class="header-title">已完成</view>
					<view class="header-value">交易已完成</view>
				</template>
				<!-- 已关闭 -->
				<template v-else>
					<view class="header-title">已关闭</view>
					<view class="header-value">交易已关闭，如有支付金额将会在1-3个工作日内原路退还</view>
				</template>
			</view>
		</view>


		<!-- Main -->
		<view class="main">
			<!-- Address -->
			<view class="container row">
				<image class="icon-md mr20" src="/static/images/icon_address.png" />
				<view>
					<!-- 联系人 -->
					<view class="row address-consignee">
						<text>{{ orderInfo.consignee }}</text>
						<text class="ml10">{{ orderInfo.mobile }}</text>
					</view>
					<!-- 地址 -->
					<view class="address-delivery">{{ orderInfo.delivery_address }}</view>
				</view>
			</view>

			<!-- Goods -->
			<view class="container">
				<lease-order-goods :image="goodsInfo.image">
					<template #name>{{ goodsInfo.goods_name }}</template>
					<template #specs>
						{{ goodsInfo.spec_value }} 
						{{ goodsInfo.periods }}
						{{ getPeriodsUnit(goodsInfo.periods_attribute) }}
					</template>
					<template #price>
						<price :content="oneDayPrice" mainSize="38rpx" minorSize="24rpx" color="#333333"
							:isPrefix="true" :isSuffix="true" />
						<text>（x{{ goodsInfo.periods }}期）</text>
					</template>
				</lease-order-goods>
			</view>

			<!-- Price Details -->
			<view class="periods-price container">
				<!-- 剩余月付金额 -->
				<view class="periods-price-item">
					<view>
						<view class="lighter periods-price-row row-between">
							<view>总租金</view>
							<view>¥{{ goodsInfo.total_rent }}</view>
						</view>
						<view class="lighter periods-price-row row-between">
							<view>租期</view>
							<view>{{ goodsInfo.periods }}期</view>
						</view>
						<view class="lighter periods-price-row row-between">
							<view>每期应还</view>
							<view>¥{{ goodsInfo.issue_rent }}</view>
						</view>
					</view>
				</view>

				<!-- 首期实付金额 -->
				<view class="periods-price-item">
					<view>
						<view class="lighter periods-price-row row-between">
							<view>首期月租金额</view>
							<view>¥{{ goodsInfo.issue_rent }}</view>
						</view>
						<template v-if="goodsInfo.insurance !== null">
							<view class="lighter periods-price-row row-between">
								<view>保险套餐</view>
								<view>+¥{{ goodsInfo.insurance || '0.00' }}</view>
							</view>
						</template>
						<view class="lighter periods-price-row row-between">
							<view>保证金</view>
							<view>+¥{{ goodsInfo.deposit }}</view>
						</view>
						<!-- 						<view class="lighter periods-price-row row-between">
						    <view>优惠券</view>
						    <view>-¥{{ orderInfo.discount_amount }}</view>
						</view> -->
					</view>
					<!-- 					<view class="row-between periods-price-title">
					    <view class="ornament">应付金额</view>
					    <view class="ornament">¥{{ goodsInfo.first_pay_amount }}</view>
					</view> -->
				</view>
				<view class="periods-price-item">
					<view class="periods-price-total">
						<text class="periods-price-total-title">合计:</text>
						<price :content="goodsInfo.first_pay_amount" mainSize="38rpx" minorSize="24rpx" :isPrefix="true"
							:isSuffix="false" />
					</view>
				</view>
				<!-- 商品押金 -->
				<!-- 			    <view class="periods-price-item">
			        <view class="row-between periods-price-title">
			            <view>商品押金</view>
			            <view>¥{{ goodsInfo.deposit }}</view>
			        </view>
			        <view>
			            <view class="lighter periods-price-row row-between">
			                <view>保证金</view>
			                <view>¥{{ goodsInfo.deposit }}</view>
			            </view>
			            <view class="lighter periods-price-row row-between">
			                <view>芝麻信用抵扣</view>
			                <view>-¥0</view>
			            </view>
			        </view>
			    </view> -->
				<!-- 				<view class="periods-price-total">
					<text class="periods-price-total-title">合计:</text>
					<price
					  :content="goodsInfo.first_pay_amount" 
					  mainSize="38rpx" 
					  minorSize="24rpx" 
					  :isPrefix="true"
					/>
				</view> -->
			</view>

			<!-- Remark -->
			<view class="container remark">
				<view class="remark-title">买家留言</view>
				<view class="remark-content">{{ orderInfo.user_remark }}</view>
			</view>

			<!-- Express -->
			<view class="container">
				<!-- 订单编号 -->
				<view class="express-row">
					<view class="express-row-title">订单编号</view>
					<view class="express-row-content row-between">
						<view>{{ orderInfo.order_sn }}</view>
						<view class="express-button--copy" @tap="copyText(orderInfo.order_sn)">复制</view>
					</view>
				</view>
				<!-- 支付方式 -->
				<view class="express-row">
					<view class="express-row-title">支付方式</view>
					<view class="express-row-content">{{ getPayWay(orderInfo.pay_way) }}</view>
				</view>
				<!-- 下单时间 -->
				<view class="express-row">
					<view class="express-row-title">下单时间</view>
					<view class="express-row-content">{{ orderInfo.create_time }}</view>
				</view>
				<!-- 付款时间 -->
				<template v-if="orderInfo.pay_time">
					<view class="express-row">
						<view class="express-row-title">付款时间</view>
						<view class="express-row-content">{{ orderInfo.pay_time }}</view>
					</view>
				</template>
				<!-- 发货时间 -->
				<template v-if="orderInfo.shipping_time">
					<view class="express-row">
						<view class="express-row-title">发货时间</view>
						<view class="express-row-content">{{ orderInfo.shipping_time }}</view>
					</view>
				</template>
				<!-- 收货时间 -->
				<template v-if="orderInfo.confirm_take_time">
					<view class="express-row">
						<view class="express-row-title">收货时间</view>
						<view class="express-row-content">{{ orderInfo.confirm_take_time }}</view>
					</view>
				</template>
				<!-- 成交时间 -->
				<template v-if="orderInfo.finish_time">
					<view class="express-row">
						<view class="express-row-title">成交时间</view>
						<view class="express-row-content">{{ orderInfo.finish_time }}</view>
					</view>
				</template>
			</view>
		</view>


		<!-- Footer -->
		<!-- 		<view class="order-footer">
			<block v-for="index in getButtons(orderInfo.order_status)" :key="index">
				<view class="order-button" :class="[buttonList[index]['class']]">
					{{ buttonList[index].name }}
				</view>
			</block>
		</view> -->

		<view class="order-footer">
			<block v-for="index in getButtons(orderInfo.order_status)" :key="index">
				<view class="order-button" :class="[buttonList[index]['class']]"
					@tap="onOrderButton(buttonList[index].key)">
					{{ buttonList[index].name }}
				</view>
			</block>
			<!-- 合同 -->
			<template v-if="orderInfo.order_status == 1">
				<template v-if="orderInfo.contract_status == 0">
					<view class="order-button order-button--inactive">待合同生成</view>
				</template>
				<template v-else-if="orderInfo.contract_status == 1">
					<view class="order-button order-button--normal" @tap="onOrderButton(buttonList[12].key)">上传合同</view>
				</template>
				<template v-else-if="orderInfo.contract_status == 2">
					<view class="order-button order-button--normal" @tap="onOrderButton(buttonList[12].key)">合同审核中
					</view>
				</template>
				<template v-else-if="orderInfo.contract_status == 3">
					<view class="order-button order-button--normal" @tap="onOrderButton(buttonList[12].key)">合同审核通过
					</view>
				</template>
				<template v-else-if="orderInfo.contract_status == 4">
					<view class="order-button order-button--error" @tap="onOrderButton(buttonList[12].key)">合同审核失败
					</view>
				</template>
			</template>
		</view>

		<!-- Widget -->
		<view>
			<!-- 取消订单 -->
			<u-modal v-model="showCloseOrderModal" content="取消订单" :show-cancel-button="true"
				@confirm="handleOrderClose" />

			<!-- 删除订单 -->
			<u-modal v-model="showDelOrderModal" content="删除订单" :show-cancel-button="true" @confirm="handleOrderDel" />

			<!-- 确认收货 -->
			<u-modal v-model="showConfirmOrderModal" content="确认收货" :show-cancel-button="true"
				@confirm="handleOrderConfirm" />

			<!-- 续租 -->
			<u-popup v-model="showReletOrderPopup" mode="center" border-radius="20">
				<view class="relet">
					<view class="relet-title">续租</view>
					<view class="relet-content">
						<view class="relet-label">请选择租期</view>
						<view class="relet-list">
							<block v-for="item in reletList" :key="item.periods_id">
								<view class="relet-item" :class="{'relet-item--active': relet == item.periods_id}"
									@tap="relet = item.periods_id">
									{{ item.name }}
								</view>
							</block>
						</view>
					</view>
					<view class="relet-widget">
						<view class="relet-cancel" @tap="showReletOrderPopup = false">取消</view>
						<view class="relet-confirm" @tap="handleRelet">确认</view>
					</view>
				</view>
			</u-popup>

			<!-- 还机 -->
			<u-popup v-model="showReturnOrderPopup" mode="center" border-radius="20">
				<view class="return">
					<view class="return-title">温馨提示</view>
					<view class="return-content">您当前租期未到期，提前还机需支付相应的违约金，是否确认还机？</view>
					<view class="return-widget">
						<view class="return-cancel" @tap="showReturnOrderPopup = false">取消</view>
						<view class="return-confirm" @tap="goReturnOrder">确认</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>


<script>
	import {
		leaseOrderCancel, // 取消订单
		leaseOrderDel, // 删除订单
		getLeaseOrderDetail, // 订单详情
		leaseOrderConfirm, // 确认收货
		leaseOrderRelet, // 续租
		leaseReturnCheck, // 还机验证
	} from '@/api/lease.js';
	import {
		prepay,
		getAlipayPayStatus
	} from '@/api/app';
	import {
		wxpay,
		alipay
	} from '@/utils/pay'
	import { copy } from '@/utils/tools'

	export default {
		data() {
			return {
				orderID: 0, // 订单ID
				orderStatus: 0, // 订单状态
				orderInfo: {}, // 订单信息
				goodsInfo: {}, // 商品信息
				showConfirmOrderModal: false, // 确认收货Modal
				showDelOrderModal: false, // 删除订单Modal
				showCloseOrderModal: false, // 取消订单Modal

				showReletOrderPopup: false, // 续租 Popup
				showReturnOrderPopup: false, // 还机 Popup
				reletList: [], // 续租期 数据列表
				relet: '', // 选择的租期
				// 按钮列表
				buttonList: {
					0: {
						key: 'pay',
						name: '立即付款',
						class: 'order-button--active'
					},
					1: {
						key: 'repayment',
						name: '去还款',
						class: 'order-button--active'
					},
					2: {
						key: 'receive',
						name: '确认收货',
						class: 'order-button--normal'
					},
					3: {
						key: 'evaluate',
						name: '去评价',
						class: 'order-button--normal'
					},
					4: {
						key: 'return',
						name: '还机',
						class: 'order-button--normal'
					},
					5: {
						key: 'buy',
						name: '买断',
						class: 'order-button--normal'
					},
					6: {
						key: 'buy_detail',
						name: '买断详情',
						class: 'order-button--normal'
					},
					7: {
						key: 'return_detail',
						name: '还机详情',
						class: 'order-button--normal'
					},
					8: {
						key: 'continue',
						name: '续租',
						class: 'order-button--normal'
					},
					9: {
						key: 'close',
						name: '取消订单',
						class: 'order-button--inactive'
					},
					10: {
						key: 'express',
						name: '查看物流',
						class: 'order-button--inactive'
					},
					11: {
						key: 'del',
						name: '删除订单',
						class: 'order-button--inactive'
					},
					12: {
						key: 'contract',
						name: '上传合同',
						class: 'order-button--normal'
					}
				}
			}
		},

		computed: {
			// 每天多少钱
			oneDayPrice() {
				const unit = this.goodsInfo.periods_attribute;
				const issueRent = this.goodsInfo.issue_rent;
				switch (unit) {
					// case 'is_week': return (issueRent / 7).toFixed(1);
					// case 'is_month': return (issueRent / 30).toFixed(1);
					case 'is_week':
						return Number((issueRent / 7).toString().match(/^\d+(?:\.\d{0,2})?/));
					case 'is_month':
						return Number((issueRent / 30).toString().match(/^\d+(?:\.\d{0,2})?/));
				}
			},

			// 支付剩余倒计时
			payCountDown() {
				const orderInfo = this.orderInfo;

				const now = new Date().getTime() / 1000;
				const create = new Date(orderInfo.create_time).getTime() / 1000;
				const end = create + orderInfo.order_close_time;

				return end - now;
			}
		},

		methods: {
			// 输出分期单位
			getPeriodsUnit(value) {
				switch (value) {
					case 'is_week':
						return '周';
					case 'is_month':
						return '个月';
				}
			},

			// 支付方式
			getPayWay(type) {
				switch (type) {
					case 1:
						return '微信支付';
					case 2:
						return '支付宝支付';
					case 3:
						return '余额支付';
				}
			},

			// 复制文本
			copyText(value) {
				copy(value)
				// uni.setClipboardData({
				// 	data: value,
				// 	success() {
				// 		uni.showToast({
				// 			title: '复制成功',
				// 			icon: 'success'
				// 		});
				// 	}
				// });
			},

			// 获取该订单应有的按钮
			getButtons(status) {
				const order = this.orderInfo;
				switch (status) {
					// 待付款
					case 0:
						return [0, 9];
						// 待发货
					case 1:
						return [9];
						// 待收货
					case 2:
						return [2, 10];
						// 租用中
					case 3: {
						const btns = [5, 8];
						// 支付
						if (order.is_repayment * 1) btns.push(1);
						// 还机
						if (!order.is_return_details_show * 1 && order.is_return_show * 1) btns.unshift(4);
						// 还机详情
						if (order.is_return_details_show * 1) return [7];
						// 买断
						if (order.is_buyout_details_show * 1) btns.unshift(6);

						return btns;
					}
					// 已完成
					case 4: {
						const btns = [];
						// 评价
						if (!order?.lease_order_goods[0]?.is_comment * 1) btns.push(3);
						// 还机详情
						if (!order.is_buyout_details_show * 1 && order.is_return_details_show * 1) btns.unshift(7);
						// 买断
						if (order.is_buyout_details_show * 1) btns.unshift(6);
						return btns;
					}
					// 已关闭
					case 5:
						return [11];
				}
			},



			// 订单按钮
			onOrderButton(event) {
				switch (event) {
					// 立即付款
					case 'pay':
						return this.onOrderPay();
						// 去还款
					case 'repayment':
						return this.onOrderRepayment();
						// 确认收货
					case 'receive':
						return this.onOrderReceive();
						// 去评价
					case 'evaluate':
						return this.onOrderEvaluate();
						// 还机
					case 'return':
						return this.onOrderReturn();
						// 买断
					case 'buy':
						return this.onOrderBuy();
						// 买断详情
					case 'buy_detail':
						return this.onOrderBuyDetail();
						// 还机详情
					case 'return_detail':
						return this.onOrderReturnDetail();
						// 续租
					case 'continue':
						return this.onOrderRelet();
						// 取消订单
					case 'close':
						return this.onOrderClose();
						// 查看物流
					case 'express':
						return this.onOrderExpress();
						// 删除订单
					case 'del':
						return this.onOrderDel();
						// 合同
					case 'contract':
						return this.onContract();
				}
			},

			// 点击合同
			onContract() {
				const id = this.orderID;
				uni.navigateTo({
					url: `/bundle/pages/lease_contract/lease_contract?id=${id}`
				})
			},

			// 按下立即付款按钮
			onOrderPay() {
				const payWay = this.orderInfo.pay_way;
				const id = this.orderID;

				prepay({
					from: 'lease_order',
					order_id: id
				}).then(res => {
					const code = res.code;
					const data = res.data;

					switch (code) {
						// 微信支付
						case 1:
							return this.handlePayWeChat(data);
							// 支付宝支付
						case 20001:
							return this.handlePayAlipay(data);
							// 余额支付
						case 10001:
							return;
					}
				});
			},

			// 按下去还款按钮
			onOrderRepayment() {
				const id = this.orderID;
				uni.navigateTo({
					url: `/bundle/pages/lease_bill/lease_bill?id=${id}`
				})
			},

			// 按下确认收货按钮
			onOrderReceive() {
				this.showConfirmOrderModal = true;
			},

			// 按下去评价按钮
			onOrderEvaluate() {
				const id = this.orderID;
				const goodsID = this.orderInfo?.lease_order_goods[0]?.id;
				uni.navigateTo({
					url: `/bundle/pages/lease_goods_reviews/lease_goods_reviews?id=${id}&goods_id=${goodsID}`
				});
			},

			// 按下还机按钮
			onOrderReturn() {
				const id = this.orderID;
				leaseReturnCheck({
					id,
					action: 'check'
				}).then(res => {
					const code = res.code;
					console.log(res);
					if (code == 1) {
						uni.navigateTo({
							url: `/bundle/pages/lease_return_detail/lease_return_detail?id=${id}`
						})
					} else {
						this.showReturnOrderPopup = true;
					}
				})
			},

			// 按下买断按钮
			onOrderBuy() {
				const id = this.orderID;
				uni.navigateTo({
					url: `/bundle/pages/lease_pay_buy/lease_pay_buy?id=${id}`
				})
			},

			// 按下买断详情按钮
			onOrderBuyDetail() {
				const id = this.orderID;
				uni.navigateTo({
					url: `/bundle/pages/lease_buy_detail/lease_buy_detail?id=${id}`
				})
			},

			// 按下还机详情按钮
			onOrderReturnDetail() {
				const id = this.orderID;
				uni.navigateTo({
					url: `/bundle/pages/lease_return_detail/lease_return_detail?id=${id}`
				})
			},

			// 按下续租按钮
			onOrderRelet() {
				uni.showLoading({
					title: '加载中'
				});
				const id = this.orderID;
				leaseOrderRelet({
					id,
					action: 'info'
				}).then(res => {
					uni.hideLoading();
					if (res.code != 1) return;
					this.showReletOrderPopup = true;
					const data = res.data;
					this.reletList = data;
					this.relet = data[0].periods_id;
				});
			},

			// 按下取消订单按钮
			onOrderClose(id) {
				this.showCloseOrderModal = true;
			},

			// 按下查看物流按钮
			onOrderExpress() {
				const id = this.orderID;
				uni.navigateTo({
					url: `/bundle/pages/goods_logistics/goods_logistics?id=${id}`
				})
			},

			// 按下删除订单按钮
			onOrderDel() {
				this.showDelOrderModal = true;
			},


			// 取消订单处理
			handleOrderClose() {
				const id = this.orderID;
				leaseOrderCancel({
					id
				}).then(res => {
					this.initData();
				});
			},

			// 删除订单处理
			handleOrderDel() {
				const id = this.orderID;
				leaseOrderDel({
					id
				}).then(res => uni.navigateBack());
			},

			// 确认收货处理
			handleOrderConfirm() {
				const id = this.orderID;
				leaseOrderConfirm({
					id
				}).then(res => this.initData());
			},

			// 续租处理
			handleRelet() {
				const id = this.orderID;

				leaseOrderRelet({
					id,
					periods_id: this.relet,
					action: 'submit',
				}).then(res => {
					this.showReletOrderPopup = false;
					if (res.code != 1) return;
					uni.showToast({
						title: '续租成功',
						icon: 'success'
					});
				});
			},

			// 前往还机
			goReturnOrder() {
				const id = this.orderID;
				this.showReturnOrderPopup = false;
				uni.navigateTo({
					url: '/bundle/pages/lease_goods_return/lease_goods_return' +
						'?id=' + id
				})
			},

			// 微信支付
			handlePayWeChat(data) {
				const id = this.orderID;

				wxpay(data).then(res => {
					if (res == 'success') {
						this.initData();
						uni.navigateTo({
							url: '/bundle/pages/lease_pay_result/lease_pay_result' +
								'?id=' + id
						});
					} else {
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						});
					}
				})
			},

			// 支付宝支付
			handlePayAlipay(data) {
				const id = this.orderID;

				// #ifdef H5
				alipay(data);
				// #endif


				// #ifdef MP-ALIPAY
				const tradeNo = data?.data?.trade_no;
				my.tradePay({
					tradeNO: tradeNo,
					success: (res) => {
						getAlipayPayStatus({
							trade_no: tradeNo
						}).then(res => {
							if (res.tradeStatus == 'TRADE_SUCCESS') {
								uni.redirectTo({
									url: `/bundle/pages/lease_pay_result/lease_pay_result?id=${this.billInfo.id}`
								})
							} else {
								uni.showToast({
									title: '支付失败',
									icon: 'none'
								});
							}
						});
					},
					fail: (res) => {
						console.log(res);
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						});
					}
				});
				// #endif

			},

			// 初始化数据
			initData() {
				// 请求订单数据
				getLeaseOrderDetail({
					id: this.orderID
				}).then(res => {
					if (res.code != 1) return;
					const data = res.data;
					// 初始化数据
					this.orderInfo = data;
					this.orderStatus = data.order_status;
					this.goodsInfo = data.lease_order_goods[0];
				});
			},

			// 待支付倒计时结束
			endPayCountDown() {
				this.initData();
			}
		},

		onLoad(options) {
			const id = options.id;
			this.orderID = id;
		},

		onShow() {
			this.initData();
		}
	}
</script>


<style scoped>
	.container {
		padding: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 7px;
		background-color: #FFFFFF;
	}

	.lease-order-detail {
		padding-bottom: 100rpx;
	}

	.header {
		position: relative;
	}

	.header-content {
		position: relative;
		padding: 20rpx 40rpx;
		color: #FFFFFF;

		/* #ifdef MP-ALIPAY || H5 */
		height: 200rpx;
		background-image: linear-gradient(to bottom, #24A3FF, #3187FD);
		/* #endif */
	}

	/* #ifndef MP-ALIPAY  || H5 */
	.header-content::after {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
		display: block;
		content: '';
		width: 100%;
		height: 200rpx;
		background-image: linear-gradient(to bottom, #24A3FF, #3187FD);
	}

	/* #endif */

	.header-title {
		font-weight: 500;
		font-size: 32rpx;
	}

	.header-value {
		font-size: 26rpx;
	}


	.main {
		padding: 20rpx;

		/* #ifdef MP-ALIPAY */
		position: relative;
		margin-top: -100rpx;
		/* #endif */
	}

	.address-consignee {
		font-size: 30rpx;
		font-weight: 500;
		color: #222222;
	}

	.address-delivery {
		font-size: 26rpx;
		color: #666666;
	}


	.periods-price {
		padding: 0 20rpx;
	}

	.periods-price-item {
		padding: 20rpx 0;
	}

	.periods-price-item:nth-child(n+2) {
		border-top: 1px solid #E5E5E5;
	}

	.periods-price-title {
		padding: 10rpx 0;
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
	}

	.periods-price-row {
		padding: 10rpx 0;
		font-size: 26rpx;
	}

	.periods-price-total {
		padding: 30rpx 0;
		text-align: right;
	}

	.periods-price-total-title {
		margin-right: 10rpx;
		font-size: 30rpx;
		color: #333333;
	}

	.remark {
		display: flex;
		font-size: 28rpx;
	}

	.remark-title {
		flex-shrink: 0;
		color: #333333;
	}

	.remark-content {
		box-sizing: border-box;
		margin-left: 30rpx;
		color: #999999;
		white-space: normal;
		word-break: break-all;
		overflow: hidden;
	}

	.express-row {
		display: flex;
		font-size: 28rpx;
	}

	.express-row:nth-child(n+2) {
		margin-top: 20rpx;
	}

	.express-row-title {
		color: #333333;
	}

	.express-row-content {
		flex: 1;
		margin-left: 30rpx;
		color: #101010;
	}

	.express-button--copy {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		height: 100%;
		padding: 0 20rpx;
		border: 1px solid #D7D7D7;
		border-radius: 50px;
		font-size: 24rpx;
		color: #555555;
	}

	.order-footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 100rpx;
		padding: 0 20rpx;
		border-radius: 10px 10px 0 0;
		box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16);
		background-color: #FFFFFF;
	}

	.order-button {
		box-sizing: border-box;
		padding: 10rpx 40rpx;
		border-radius: 100px;
		font-size: 26rpx;
	}

	.order-button:nth-child(n+2) {
		margin-left: 20rpx;
	}

	.order-button--active {
		background-color: #24A3FF;
		color: #FFFFFF;
	}

	.order-button--inactive {
		border: 1px solid #D7D7D7;
		background-color: #FFFFFF;
		color: #666666;
	}

	.order-button--normal {
		background-color: #FFFFFF;
		border: 1px solid #24A3FF;
		color: #24A3FF;
	}

	.order-button--error {
		background-color: #FFFFFF;
		border: 1px solid #FF2C3C;
		color: #FF2C3C;
	}

	.relet,
	.return {
		width: 640rpx;
		padding: 30rpx 40rpx;
		background-color: #FFFFFF;
	}

	.relet-title,
	.return-title {
		padding-bottom: 30rpx;
		text-align: center;
		font-weight: 500;
		font-size: 34rpx;
		color: #333333;
	}

	.relet-label {
		font-size: 28rpx;
		color: #333333;
	}

	.relet-list {
		display: flex;
		flex-wrap: wrap;
	}

	.relet-item {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 152rpx;
		height: 58rpx;
		margin: 20rpx 20rpx 0 0;
		border-radius: 50px;
		font-size: 26rpx;
		color: #333333;
		background-color: #F4F4F4;
	}

	.relet-item--active {
		background-color: #E8F6FF;
		box-shadow: 0 0 0 1px #24A3FF;
		color: #24A3FF;
	}

	.relet-widget,
	.return-widget {
		display: flex;
		justify-content: space-between;
		margin-top: 84rpx;
	}

	.relet-cancel,
	.relet-confirm,
	.return-cancel,
	.return-confirm {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 268rpx;
		height: 74rpx;
		font-size: 32rpx;
		border-radius: 50px;
	}

	.relet-cancel,
	.return-cancel {
		background-color: #F6F6F6;
		color: #666666;
	}

	.relet-confirm,
	.return-confirm {
		background-color: #24A3FF;
		color: #FFFFFF;
	}
</style>
